之前在單個元件內成功儲存了資料，今天試作全部存檔/讀檔功能，最後用了一個比較傻瓜但操作簡單的方法。

先在子元件的html標籤上加一個讓Angular識別的attr：

<profile #myProfile></profile>
...
<characteristics #myCharacteristics></characteristics>

這麼一來便能存取子元件裡的變數了：

    <button type="button" class="btn btn-primary mr-2" 
        (click)="saveAll()"    
        (click)="myProfile.saveProfileData()"
        (click)="myCharacteristics.saveStatusItem()">
        Save All
    </button>
    <button type="button" class="btn btn-primary mr-2" 
        (click)="myProfile.getProfileData()"
        (click)="myCharacteristics.getStatusItem()">
        Load All
    </button>

實際操作結果：
https://i.imgur.com/QORv3Y4.gif

目前的實作方式是，由外層最外層的父元件調用子元件的method，這樣可以免去傳來傳去各種變數的功夫，各個子元件也依然能保留各自內部的Save/Load功能。還有另一種方法是把資料全部傳到父元件，再由父元件執行method來存檔&讀檔。之後如果要儲存多張角色卡，會傾向使用後一種方法，兩種方法各有優缺，最後看總共會有哪些資料再來斟酌看看。

= = = = =

你今天的努力，
是否有跟未來的夢想
同一個等級？